<style>
    .titlebar{
        height:50px;
        line-height:50px;
        background: linear-gradient(90deg, rgb(29, 98, 240), rgb(25, 213, 253));
        color: rgb(255, 255, 255);
        text-align:center
    }
    .cardview{
        line-height:24px;
        padding: 18px;
        margin: 20px 10px 10px;
        background-color:#fff;
        border-radius:10px;
        color:#2b2c2d;

    }
    .ft15{
        font-size:15px;
    },
    .devider{
        padding:10px 0px;
    }
    .devider img{
        width:100%;
        height:auto; 
    }
    .quest-card{
        line-height:20px;
        padding: 8px 18px;
        margin: 10px;
        background-color:#fff;
        border-radius:10px;
        color:#2b2c2d;
    }
    .quest-card .q-title{
        height:40px;
        line-height:40px;
        border-bottom:1px solid #e5e5e5;
    }
    .quest-card .q-column{
        height:40px;
        line-height:40px;
    }
    .quest-card .ctx{
        margin-top:10px;
    }
    .btn {
        background-color: #28a745;
    }

    .lottery-wrap {
        padding:20px;
    }
    .lottery-wrap .title{
        height:40px;
        font-weight:600;
        border-bottom:1px solid #e5e5e5;
    }
    .green-gradient{
        background: linear-gradient(90deg, rgb(14, 123, 39), rgb(40, 167, 69)); color: rgb(255, 255, 255);
    }
    .gray-gradient{
        background: linear-gradient(90deg, rgb(100, 100, 100), rgb(136, 136, 136)); color: rgb(195, 195, 195);
    }
    .login-ipt{
        padding:0px;
    }
    b{
        font-weight:600;
        color:#FF6633;
    }
</style>

<template>
    <div class="contain">
        <div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>
        <img src="@/assets/wx_dist/wx_dist_1.png" width="300" height="300" style="display:none">
        <div class="page">
            <div class="ft16 titlebar">
                {{todolist.Title}}
            </div>
            <div class="ft15 cardview" v-html="todolist.Content">
            </div>
            <div class="devider"><img src="@/assets/bg/beeline.png"></div>

            <div class="quest-card">
                <div class="q-title">
                    1.请问您孩子的年龄？
                </div>
                <div class="q-column">
                    <div class="displayflex">
                        <popup-picker class="picker-wrap" title="" :data="ageList" placeholder="点击选择" value-text-align="left" :show-name="ageshow" v-model="age"></popup-picker>
                        <i class="iconfont icon-right"></i>
                    </div>
                </div>
            </div>

            <div class="quest-card">
                <div class="q-title">
                    2.您的孩子曾经参加过类似的艺术研学吗？
                </div>
                <div class="q-column">
                    <div class="displayflex">
                        <popup-picker class="picker-wrap" title="" :data="ynList" placeholder="点击选择" value-text-align="left" :show-name="ynshow" v-model="yn"></popup-picker>
                        <i class="iconfont icon-right"></i>
                    </div>
                </div>
            </div>
            
            <div class="quest-card">
                <div class="q-title">
                    3.您认为艺术研学对孩子有何意义？
                </div>
                <div class="ctx flex1">
                    <x-textarea title="" placeholder="请输入" v-model="MemoA" autosize :max="200"></x-textarea>
                </div>
            </div>

            <div class="quest-card">
                <div class="q-title">
                    4.是否继续支持开展相关类似活动？
                </div>
                <div class="q-column">
                    <div class="displayflex">
                        <popup-picker class="picker-wrap" title="" :data="yn1List" placeholder="点击选择" value-text-align="left" :show-name="yn1show" v-model="yn1"></popup-picker>
                        <i class="iconfont icon-right"></i>
                    </div>
                </div>
            </div>

            <div class="quest-card">
                <div class="q-title">
                    5.您有何意见和建议？
                </div>
                <div class="ctx flex1">
                    <x-textarea title="" placeholder="请输入" v-model="MemoB" autosize :max="200"></x-textarea>
                </div>
            </div>
        </div>

        <div class="btn-bottom">
            <div class="btn green-gradient" @click="checkForm" v-if="hasFilled == 'N'">提交</div>
            <div class="btn gray-gradient" v-else>提交</div>
        </div>

        <x-dialog v-model="showPop" :dialog-style="{'max-width': '96%', width: '96%', 'background-color': '#f5f5f5'}">
            <div class="lottery-wrap">
                <div class="title">
                    反馈完成，恭喜您获得一次抽奖机会！
                </div>
                <lottery :onetime="onetime" :beforeLottery="beforeLottery" :lotteryBtn="lotteryBtn" :prizesList="prizesList" :prize="prize" :afterLottery="afterLottery"></lottery>
            </div>
        </x-dialog>

        <x-dialog v-model="showForm" :dialog-style="{'max-width': '96%', width: '96%', 'background-color': '#f5f5f5'}">
            <div class="lottery-wrap" v-if="formData.length >0">
                <div class="title">
                    {{formData[0]}}
                </div>
                <div class="ft14" style="line-height:24px; margin:10px 0px" v-html="formData[1]"></div>
                <ul class="login-wrap">
                    <li class="displayflex">
                        <span class="iconfont icon-account"></span>
                        <div class="flex1 login-ipt"><input type="text" placeholder="联系人" v-model.trim="questname"></div>
                        <span class="iconfont icon-del" v-if="questname" @click="questname=''"></span>
                    </li>
                    <li class="displayflex">
                        <span class="iconfont icon-mobilephone"></span>
                        <div class="flex1 login-ipt"><input type="tel" placeholder="手机号" v-model.trim="mobileNo"></div>
                        <span class="iconfont icon-del" v-if="mobileNo" @click="mobileNo=''"></span>
                    </li>
                    <div class="btn green-gradient" style="display:block; height:45px; line-height:45px;" @click="submit">
                        确认领取
                    </div>
                </ul>
                
            </div>
        </x-dialog>
    </div>
</template>

<script>
import lottery from "@/components/share/lottery.vue";
export default {
    components: {
        lottery
    },
    data(){
        return {
            showLoad:false,
            todolist:[],
            ynshow: true,
            yn: [],
            ynList:
            [
                [
                    {
                        value: "曾经参加过",
                        name: "曾经参加过"
                    },
                    {
                        value: "没有",
                        name: "没有"
                    },
                ]
            ],

            yn1show: true,
            yn1: [],
            yn1List:
            [
                [
                    {
                        value: "是",
                        name: "是"
                    },
                    {
                        value: "否",
                        name: "否"
                    },
                ]
            ],

            ageshow: true,
            age: [],
            ageList: 
            [
                [
                    {
                        value: "3岁",
                        name: "3岁"
                    },
                    {
                        value: "4岁",
                        name: "4岁"
                    },
                    {
                        value: "5岁",
                        name: "5岁"
                    },
                    {
                        value: "6岁",
                        name: "6岁"
                    },
                    {
                        value: "7岁",
                        name: "7岁"
                    },
                    {
                        value: "8岁",
                        name: "8岁"
                    },
                    {
                        value: "9岁",
                        name: "9岁"
                    },
                    {
                        value: "10岁",
                        name: "10岁"
                    },
                    {
                        value: "11岁",
                        name: "11岁"
                    },
                    {
                        value: "12岁",
                        name: "12岁"
                    }
                ]
            ],
            ageVal:"",
            ynVal:"",
            yn1Val:"",
            MemoA:"",
            MemoB:"",
            showPop:false,
            showForm:false,

            prize:0,
            prizeText:'',
            prizesList:[
                require("@/assets/lottery/prize4.png"),  //4
                require("@/assets/lottery/thanks.png"),  //2
                require("@/assets/lottery/prize2.png"),  //1
                require("@/assets/lottery/thanks.png"),  //3
                require("@/assets/lottery/prize1.png"),  //5
                require("@/assets/lottery/thanks.png"),  //6
                require("@/assets/lottery/prize3.png"),  //7
                require("@/assets/lottery/thanks.png"),  //8
            ],
            lotteryBtn:{
                img : require("@/assets/lottery/lottery_btn.png")
            },
            onetime:false,

            formData:[],
            mobileNo:'',
            questname:'',
        }
    },
    watch: {
        age(n) {
            this.ageVal = n[0];
        },
        yn(n) {
            this.ynVal = n[0];
        },
        yn1(n) {
            this.yn1Val = n[0];
        }
    },
    computed: {
        rid(){
            return this.$route.query.id;
        },
        hasFilled(){
            if(localStorage.hasFilled != null && localStorage.hasFilled == 'Y'){
                return 'N';
            } else {
                return 'N';
            }
        }
    },
    methods:{
        getData() {
            if(this.hasFilled == 'Y') {
                this.$vux.alert.show({
                    title: '提示',
                    content: '您已经填写过此问卷，请不要重复作答，稍后将会有工作人员与您联系，请点击返回或关闭页面。',
                });
            }

            var _this = this,
                guid = this.rid,
                query = {
                    guid:guid,
                };
            this.showLoad = true;
            this.Ajax.post("GetQuestionnaire", query).then(function(resp) {
                _this.showLoad = false;
                if(resp.IsSuccess){
                    _this.todolist = resp.Data;
                } else {
                    _this.$vux.toast.show({
                        type: "warn", //success, warn, cancel, text
                        text: resp.ErrorMessage,
                    });
                }
            })
            .catch(error => {
                _this.showLoad = false;
                _this.$vux.toast.show({
                    type: "warn", //success, warn, cancel, text
                    text: "网络连接失败"
                });
            });
        },

        checkForm() {
            var _this = this;
            if (_this.ageVal == "") {
                _this.$vux.toast.show({
                    type: "cancel", //success, warn, cancel, text
                    text: "年龄没有填写哦"
                });
                return false;
            }

            if (_this.ynVal == "") {
                _this.$vux.toast.show({
                    type: "cancel", //success, warn, cancel, text
                    text: "第二题还没有回答哦"
                });
                return false;
            }

            if (_this.MemoA == "") {
                _this.$vux.toast.show({
                    type: "cancel", //success, warn, cancel, text
                    text: "第三题还没有回答哦"
                });
                return false;
            }

            if (_this.yn1Val == "") {
                _this.$vux.toast.show({
                    type: "cancel", //success, warn, cancel, text
                    text: "第四题还没有回答呢，就差一点点了"
                });
                return false;
            }

            if (_this.MemoB == "") {
                _this.$vux.toast.show({
                    type: "cancel", //success, warn, cancel, text
                    text: "最后一题还没填写，就差最后一步了"
                });
                return false;
            }

            _this.showPop = true;
        },

        beforeLottery(resolve,reject){
        /*
        * send ajax to get result and pass to child component
        **/ 
        // get result : this.prize
            setTimeout(()=>{
                // var prizeList = ('4').split(','),
                //     i = Math.floor(Math.random() * 4),
                //     prize = prizeList[i]*1;
                // this.prize = prize;
                this.prize = 4;
                this.prizeText = '1380元写作提高课';
                this.onetime = true;
                resolve();
            },100);

          },

        afterLottery(){
            // alert('draw'+ this.prize);
            this.submitQuest();
        },

        submitQuest() {
            var _this = this;
            this.showPop = false;
            if(this.prize == '2' || this.prize == '4' || this.prize == '6' || this.prize == '8')
            {
                _this.showForm = true;
                _this.formData.push('祝贺您！');
                _this.formData.push('您赢取了[<b>'+ _this.prizeText +'</b>]奖项，请填写信息领取。');
            } else {
                _this.$vux.alert.show({
                    title: '很遗憾！',
                    content: '这次没有中奖，下次说不定就可以哦',
                    onHide(){
                        location.reload();
                    }
                });
            }
        },

        submit(){
            var _this = this;
            var reg = /^1[345789]\d{9}$/;

            if (!this.questname) {
                this.$vux.toast.show({
                    type: "warn", //success, warn, cancel, text
                    text: "请填写联系人姓名"
                });
                return false;
            }

            if (this.mobileNo == "" || !this.mobileNo) {
                this.$vux.toast.show({
                    type: "warn", //success, warn, cancel, text
                    text: "请填写手机号"
                });
                return false;
            } else if (!reg.test(this.mobileNo)) {
                this.$vux.toast.show({
                    type: "warn", //success, warn, cancel, text
                    text: "请填写正确手机号"
                });
                return false;
            }

            
            var main = {
                QuestGuid:this.rid,
                Name:this.questname,
                ContactTel:this.mobileNo,
            }
            var column = [];
            var datarow = [];
            datarow.push(this.ageVal);
            datarow.push(this.ynVal);
            datarow.push(this.MemoA);
            datarow.push(this.yn1Val);
            datarow.push(this.MemoB);
            
            for(var i=0; i< datarow.length; i++){
                var row = {
                    RowNo:i+1,
                    Value:datarow[i],
                }
                column.push(row);
            }

            var query = {
                Main:main,
                Column:column,
            }

            this.showLoad = true;
            this.Ajax.post("FillQuestAnser", query).then(function(resp) {
                _this.showLoad = false;
                if(resp.IsSuccess){
                    _this.$vux.toast.show({
                        type: "success", //success, warn, cancel, text
                        text: "感谢您的配合，将会有工作人员尽快与您联系。",
                        onHide(){
                            localStorage.hasFilled = 'Y';
                            location.reload();
                        }
                    });
                } else {
                    _this.$vux.toast.show({
                        type: "warn", //success, warn, cancel, text
                        text: resp.ErrorMessage,
                    });
                }
            })
            .catch(error => {
                _this.showLoad = false;
                _this.$vux.toast.show({
                    type: "warn", //success, warn, cancel, text
                    text: "网络连接失败"
                });
            });

        }
    },
    created(){
        this.getData();
    },
}
</script>